<template>
	<view>
		<view class="goodsImg">
			<view>商品图</view>
		</view>
		<view class="goodsConter">
			<view class="god-con">
				<view class="tit_name">海南贵妃芒果   新鲜当季水果   小红金龙海南贵妃芒果   新鲜当季水果   小红金龙</view>
				<view class="god-pri playc">
					<view class="priceD"><text class="contxt">￥</text><text class="conPrice">99.00</text>/条</view>
					<view class="contact playc">
						<view class="contactImg">
							<image src="../../static/goods.png"></image>
						</view>
						<view>联系商家</view>
					</view>
				</view>
				<view class="jk-btn playc">
					<view class="jk-btn-lst">
						<view>品种</view>
						<view>鱼</view>
					</view>
					<view class="jk-btn-lst">
						<view>成熟日期</view>
						<view>2024-10-1</view>
					</view>
					<view class="jk-btn-lst">
						<view>状态</view>
						<view>成熟期</view>
					</view>
					<view class="jk-btn-lst">
						<view>预估产量</view>
						<view>5KG</view>
					</view>
				</view>
				<view class="nav-adress playc">
					<view class="playc n-ad">
						<image src="../../static/adress.png"></image>
						<view class="adress">地址地址地址地址地址地址地址地址地址</view>
					</view>
					<view class="coers playc">
						<image src="../../static/dh.png"></image>
						<view>导航</view>
					</view>
				</view>
			</view>
		</view>
		<view style="padding-bottom: 160rpx;">
			<view class="conGoods">
				<view class="god-vb">
					<view class="detail">
						认养收货
					</view>
					<view class="conrtij">
						XX肉；XX蛋
					</view>
				</view>
			</view>
			<view class="conGoods">
				<view class="god-vb">
					<view class="detail">
						认养详情
					</view>
					<view class="conrtij">
						图片详情
					</view>
				</view>
			</view>
		</view>
		
		<view class="bert-btn playc">
			<view class="btn-Img playc">
				<view class="btn-Img-lst">
					<image src="../../static/home.png"></image>
					<view>首页</view>
				</view>
				<view class="btn-Img-lst">
					<image src="../../static/contact.png"></image>
					<view>客服</view>
				</view>
				<view class="btn-Img-lst">
					<image src="../../static/s1.png"></image>
					<view>海报</view>
				</view>
			</view>
			<view class="rty-hj">已售罄</view>
			<view class="rty-hj rty-jk" @click="confirmOrder">立即认养</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				
			}
		},
		methods: {
			confirmOrder(){
				uni.navigateTo({
					url:"/pages/home-btn/pages/confirmOrder/confirmOrder"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.playc{
	display: flex;
	align-items: center;
}
.goodsImg{
	width: 100%;
	height: 516rpx;
	background: #D1ECC0;
}
.goodsConter{
	width: 100%;
	background-color: #fff;
	border-radius: 21rpx;
	margin-top: -30rpx;
	.god-con{
		width: 92%;
		margin: 0 auto;
		.tit_name{
			font-weight: 400;
			font-size: 26rpx;
			color: #222222;
			padding-top: 26rpx;
		}
		.god-pri{
			justify-content: space-between;
			line-height: 90rpx;
			color: #333333;
			font-size: 26rpx;
			font-weight: bold;
			.priceD{
				.contxt{
					color: #FF0000;
				}
				.conPrice{
					font-size: 47rpx;
					color: #FF0000;
				}
			}
			.contact{
				image{
					width: 30rpx;
					height: 27rpx;
					background-color: $main-color;
					margin-right: 10rpx;
					padding: 5rpx;
					border-radius: 5rpx;
				}
			}
		}
	}
	
}
.jk-btn{
	justify-content: space-around;
	width: 100%;
	padding-top: 20rpx;
	.jk-btn-lst{
		width: 50%;
		text-align: center;
		position: relative;
		font-weight: 400;
		font-size: 21rpx;
		color: #A6A6A6;
		line-height: 30rpx;
	}
}
/* 竖线 */
.line:before {
  content: "";
  background-color: #D9D9D9;
  width: 2px;
  height: 39rpx;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -9px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.nav-adress{
	justify-content: space-between;
	width: 100%;
	padding: 20rpx 0;
	.n-ad{
		width: 82%;
		image{
			width: 27rpx;
			height: 27rpx;
		}
		.adress{
			font-weight: 400;
			font-size: 21rpx;
			color: #A6A6A6;
			margin-left: 10rpx;
		}
	}
	.coers{
		height: 42rpx;
		background: #FE9536;
		border-radius: 21rpx;
		text-align: center;
		margin: 0 auto;
		padding: 0 20rpx;
		color: #FFFFFF;
		font-size: 21rpx;
		image{
			width: 21rpx;
			height: 21rpx;
			margin-right: 10rpx;
		}
	}
}
.conGoods{
	width: 100%;
	background-color: #fff;
	margin-top: 15rpx;
	.god-vb{
		width: 95%;
		margin: 0 auto;
		padding: 15rpx 0;
		.detail{
			font-weight: 500;
			font-size: 21rpx;
			color: #333333;
			height: 46rpx;
			line-height: 46rpx;
			border-bottom: 1px solid #D9D9D9;
		}
		.conrtij{
			height: 50rpx;
			background: #F2F2F2;
			border-radius: 10rpx;
			line-height: 50rpx;
			width: 100%;
			margin-top: 15rpx;
			font-weight: 400;
			font-size: 21rpx;
			color: #333333;
			padding: 0 15rpx;
		}
	}
}
.bert-btn{
	height: 109rpx;
	background: #FFFFFF;
	position: fixed;
	bottom: 0;
	width: 100%;
	justify-content:space-between;
	.btn-Img{
		.btn-Img-lst{
			margin: 0 35rpx;
			text-align: center;
			image{
				width: 44rpx;
				height: 40rpx;
			}
		}
		
	}
}
.rty-hj{
	width: 170rpx;
	height: 54rpx;
	line-height: 54rpx;
	border-radius: 27rpx;
	text-align: center;
	font-weight: 500;
	font-size: 26rpx;
	font-size: 26rpx;
	color: #333333;
	background: #D9D9D9;
}
.rty-jk{
	background: #FFA655;
	color: #FFFFFF;
}
</style>
